<template>
  <div class="date-time">
    <el-row>
      <el-col :span="11">
        <el-date-picker 
          class="date"
          v-model="dt.date"
          type="date"
          placeholder="选择开始日期"
          :clearable="false"
          @change="parentClick"
        >
        </el-date-picker>
      </el-col>

      <el-col :span="11">
        <el-time-select
          class="time"
          v-model="dt.time"
          :picker-options="{
            start: '00:00',
            step: '00:15',
            end: '23:45'
          }"
          placeholder="选择开始时间"
          :clearable="false"
          @change="parentClick"
        >
        </el-time-select>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  name: 'DateTime',
  props: [ 'defDt' ],
  computed: {
    // 处理传入时间为时间类型
    dateTime: function(){
      return this.U.str2date(this.defDt);
    },
  },
  data() {
    return {
      dt: {
        date: '2021-02-28',
        time: '00:30',
      }
    }
  },
  methods: {
    // 触发-父组件方法
    parentClick(){
      let res = this.U.date2str(this.dt.date, 'yyyy-MM-dd HH:mm').split(' ')[0]+' '+this.U.date2str(this.dt.time, 'yyyy-MM-dd HH:mm').split(' ')[1]; //this.U.date2str(this.dateTime, 'yyyy-MM-dd HH:mm');
      this.$emit("myclick", res);
    }
  }
}
</script>

<style lang="less" scoped>
.date-time ::v-deep{
  .date{ // 日期
    width: 110px;

    input{
      padding-right: 0px;
    }
  }

  .time{ // 时间
    width: 102px;

    input{
      padding-right: 0px;
    }
  }
}
</style>
